<template>
<div style="width: 100%;">
<!--  1.头部 搜索框-->
  <t-navbar :fixed="false">
    <template #left>
      <t-search placeholder="搜索测试题" shape="round" />
    </template>
    <template #right>
      <t-icon name="home" size="24px" />
      <t-icon name="ellipsis" size="24px" />
    </template>
  </t-navbar>
<!--  2.轮播-->
  <div>
    <div style="width: 100%;">
      <t-swiper :navigation="{ type: 'dots' }" :autoplay="true">
        <t-swiper-item v-for="(item, index) in swipers" :key="index" style="height: 192px">
          <img style="width: 100%" :src="item" class="img" />
        </t-swiper-item>
      </t-swiper>
    </div>
  </div>
<!--  3.通知栏-->
  <div style="margin-top: 10px">
    <t-notice-bar visible marquee :content="notice" direction="vertical">
      <template #prefixIcon>
        <SoundIcon />
      </template>
    </t-notice-bar>
  </div>
<!--  4.快捷导航 宫格-->
  <div>
    <t-grid :column="4" class="grid-demo">
      <t-grid-item text="开始测试" @click="createExam" :image="imgUrl" />
      <t-grid-item text="测试通知" :image="imgUrl" />
      <t-grid-item text="测试次数" :image="imgUrl" />
      <t-grid-item text="操作日志" :image="imgUrl" />
    </t-grid>
  </div>
<!--  5.热门榜单 最新测试信息-->
  <div>
    <h3 style="float: left;margin-left: 10px">最新测试信息</h3>
    <t-divider />
    <div>
      <t-cell v-for="i in 3" title="单行标题" description="一段很长很长的内容文字" note="辅助信息" />

    </div>
  </div>

<!--  6.热门榜单 最新注册用户-->
  <div>
    <h3 style="float: left;margin-left: 10px">最新注册用户</h3>
    <t-divider />
    <div>
      <t-cell title="多行带头像" description="一段很长很长的内容文字">
        <template #leftIcon>
          <t-avatar shape="circle" :image="imgUrl" />
        </template>
      </t-cell>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from 'vue'
import { Icon as TIcon } from 'tdesign-icons-vue-next';
import { SoundIcon } from 'tdesign-icons-vue-next';
import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-vue-next';
import {get,post} from '../util/Request.js'
import {useRouter} from "vue-router";
import {Toast} from "tdesign-mobile-vue";

const router=useRouter()
const swipers=ref([
    "https://tdesign.gtimg.com/mobile/demos/swiper1.png",
    "https://tdesign.gtimg.com/mobile/demos/swiper2.png"
])
const notice=ref("MBTI是一种主流的人格测试，来，测一下你的内心，看看你是个什么样的人！")
const imgUrl=ref("https://tdesign.gtimg.com/mobile/demos/swiper1.png")

const createExam=()=>{
  router.push("/equestion")
  //请求接口
  // get("exam/create").then(r=>{
  //   if(r.code==0){
  //     //成功
  //     localStorage.setItem("meid",r.data)
  //     //创建测试成功发，跳转到开始测试
  //     router.push("/equestion")
  //   }else{
  //     Toast(r.data)
  //   }
  // })
}
</script>

<style scoped>

.t-icon-home {
  margin-right: 8px;
}

</style>